<template>
  <div id="app">
    <header class="infos">
      <div class="time">
        <div class="time-left">{{ nowTime }}</div>
        <div class="date-right">
          <div class="date-top">{{ nowDate }}</div>
          <div class="week-bottom">{{ nowWeek }}</div>
        </div>
      </div>
      <div class="record">
        <van-button
          v-for="item in buttons"
          :key="item.id"
          size="normal"
          :icon="item.icon"
          round
          :to="item.route"
          @click="toRecord(item.text)"
          >{{ item.text }}</van-button
        >
      </div>
    </header>
    <div class="main">
      <div class="goWork">
        <div class="goWork-left">
          <p class="text">上班打卡</p>
          <p class="lateTime">08:00</p>
          <p class="lateText" v-if="isClickOk">
            距离打卡结束： <span>{{ playEnd }}</span>
          </p>
          <p class="lateText" v-else>
            迟到打卡： <span>{{ playEnd }}</span>
          </p>
        </div>
        <div class="goWork-right" @click="goWork" v-if="!isGoWorkOK">
          <van-image
            round
            width="120px"
            height="120px"
            fit="cover"
            :src="imgs.goWorkOK"
          />
        </div>
        <div class="goWork-right" v-else>
          <van-image
            round
            width="120px"
            height="120px"
            fit="cover"
            :src="imgs.goWork"
          />
        </div>
      </div>
      <div class="goOffWork">
        <div class="goOffWork-left">
          <p class="text">下班打卡</p>
          <p class="lateTime">18:00</p>
          <p class="lateText">
            下班打卡倒计时：
            <span>01:00:00</span>
          </p>
        </div>
        <div class="goOffWork-right">
          <van-image
            round
            width="120px"
            height="120px"
            fit="cover"
            :src="imgs.goWorkOK"
          />
        </div>
      </div>
    </div>

    <footer class="goOutWork">
      <van-grid
        square
        :column-num="3"
        :icon-size="36"
        :border="true"
        :gutter="20"
      >
        <van-grid-item
          v-for="item in itemInfos"
          :key="item.id"
          :icon="item.icon"
          :text="item.text"
        />
      </van-grid>
    </footer>
  </div>
</template>
<script>
import goWorkOK from "@/assets/goWork/goWorkOK.jpg";
import goWork from "@/assets/goWork/goWork.jpg";
import { Toast } from "vant";
const itemInfos = [
  {
    id: 1,
    icon: "location-o",
    text: "出差记录",
    route: "/home/goToWork",
  },
  {
    id: 2,
    icon: "gold-coin-o",
    text: "出差费用记录",
    route: "/home/goOffWork",
  },
  {
    id: 3,
    icon: "gift-card-o",
    text: "午饭次数记录",
    route: "/home/businessTravel",
  },
];
export default {
  data() {
    return {
      name: "上班打卡",
      imgs: {
        goWork,
        goWorkOK,
      },
      isGoWorkOK: false,
      itemInfos,
      //顶部按钮数据对象
      buttons: [
        {
          id: 1,
          icon: "https://img01.yzcdn.cn/vant/user-active.png",
          text: "考勤记录",
          route: "/home/goToWork/allWorkList",
        },
        {
          id: 2,
          icon: "https://img01.yzcdn.cn/vant/user-active.png",
          text: "补卡",
          route: "/home/goToWoek/buka",
        },
        {
          id: 3,
          icon: "https://img01.yzcdn.cn/vant/user-active.png",
          text: "规则",
          route: "/home/goToWoek/rouls",
        },
      ],
      //顶部时间
      nowTime: "00:00:00",
      nowDate: "1月1日",
      nowWeek: "星期一",
      timer: undefined,
      //查看时候超过8点
      isClickOk: true,
      playEnd: "00:00:00",
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.getTime();
    }, 1000);
  },
  mounted() {
    this.$nextTick(() => {});
  },
  methods: {
    async getTime() {
      const { data: res } = await this.$axios({
        url: "/api/home/getNowTime",
        method: "GET",
      });
      const nowTime = `${res.hours}:${res.minutes}:${res.seconds}`;
      const nowDate = `${res.year}年${res.month}月${res.day}日`;
      this.nowTime = nowTime;
      this.nowDate = nowDate;
      this.nowWeek = res.nowWeek;
      // 设置打卡时间 8点
      const eightClick = new Date(
        `${res.year}-${res.month}-${res.day} 08:00:00`
      ).getTime();
      const fiveClick =  new Date(
        `${res.year}-${res.month}-${res.day} 17:00:00`
      ).getTime();
      // 上班打卡时间
      const nowTime2 = new Date(
        `${res.year}-${res.month}-${res.day} ${res.hours}:${res.minutes}:${res.seconds}`
      ).getTime();
      //下班打卡时间
      const nowTime3 = new Date(
        `${res.year}-${res.month}-${res.day} ${res.hours}:${res.minutes}:${res.seconds}`
      ).getTime();

      if (eightClick >= nowTime2) {
        console.log("可以打卡");
      } else {
        this.isClickOk = false
       const millisecond =  Math.abs(eightClick - nowTime2)
        console.log("迟到了");
        // var days = parseInt(millisecond / (1000 * 60 * 60 * 24));
        var hours = parseInt(
          (millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (millisecond % (1000 * 60)) / 1000;
        this.playEnd = `${hours}小时${minutes}分${seconds}秒`
      }

      if (fiveClick <= nowTime2) {
        console.log("已加班");
      } else {
        this.isClickOk = false
       const millisecond =  Math.abs(fiveClick - nowTime2)
        console.log("还未下班");
        // var days = parseInt(millisecond / (1000 * 60 * 60 * 24));
        var hours = parseInt(
          (millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (millisecond % (1000 * 60)) / 1000;
        this.playEnd = `${hours}小时${minutes}分${seconds}秒`

      }
    },
    goWork() {
      Toast("打卡成功！");
      this.isGoWorkOK = true;
    },
    toRecord(text) {
      this.$emit("sendToFather", text);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style  scoped>
[v-cloak]:not(body) {
  style="color:rgb(253 97 106)">display: none;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(2, 40, 255, 0.13);
}

/* 整体布局设置 */

.infos {
  height: 150px;
}
.goOutWork {
  height: 200px;

  margin-bottom: 15px;
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 auto;
  width: 90%;
  height: 90%;
}
.main .goWork,
.main .goOffWork {
  height: 200px;
  background-color: #fff;
  border-radius: 15px;
  padding: 0 15px;
}

/* 顶部时间布局设置 */
.infos {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.infos .time {
  height: 65%;
}
.infos .record {
  height: 35%;
}

/* 给时间部分设置flex */

.infos .time {
  display: flex;
  justify-content: space-around;
}
.time .time-left {
  font-size: 60px;
  font-weight: 900;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.time .date-right {
  font-size: 16px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.time .date-right .date-top,
.time .date-right .week-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 考勤部分 */
.record {
  display: flex;

  padding: 5px 20px;
}
.van-button {
  margin: 0 5px;
}

/* 上下班打卡部分*/
.goWork,
.goOffWork {
  display: flex;
  justify-content: space-around;
}
.goWork-left,
.goOffWork-left {
  height: 100%;
  flex: 1;
  /* background-color: pink; */
  /* flex: 1; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
/**左边部分 */
.goWork-left .text,
.goOffWork-left .text {
  font-size: 28px;
  margin-bottom: 10px;
}
.goWork-left .lateTime,
.goOffWork-left .lateTime {
  font-size: 20px;
  color: #aaa;
  font-weight: 700;
}

.goWork-left .lateText,
.goOffWork-left .lateText {
  margin-top: 30px;
  font-size: 16px;
  color: #aaa;
}
.goWork-left .lateText span,
.goOffWork-left .lateText span {
  color: rgba(255, 0, 0, 0.8);
}

/**右边部分 */
.goWork-right,
.goOffWork-right {
  height: 100%;
  /* background-color: pink; */
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/**footer 部分 */
</style>